<template>
    <div class="DetailBottomBar">
        <div class="bar-item bar-left">
            <div>
                <i class="icon service"></i>
                <span class="text">客服</span>
            </div>
            
            <div>
                <i class="icon shop"></i>
                <span class="text">店铺</span>
            </div>
            <div>
                <i class="icon select"></i>
                <span class="text">收藏</span>
            </div>
        </div>
        <div class="bar-item bar-right">
            <div class="cart" @click="addToCart">加入购物车</div>
            <div class="buy">购买</div>
        </div>
        
    </div>
</template>

<script>

export default {
    name:'DetailBottomBar',
    data () {
        return {
            
        }
    },
    components: {
        
    },
    methods: {
        addToCart(){
            this.$emit('addCart');
        }
    }
}
</script>

<style lang="less" scoped>
.DetailBottomBar{
    height: 58px;
    background-color: white;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    text-align: center;
    z-index: 999;
    .bar-item{
        flex: 1;
        display: flex;
        div{
            flex: 1;
        }
    }
    .bar-left{
        .text{
            font-size: 13px;
        }
        .icon{
            display: block;
            width: 22px;
            height: 22px;
            margin: 10px auto 3px;
            background: url("~assets/img/detail/detail_bottom.png") 0 0/100%;
            background-size: 100%;
        }
        .service{
            background-position: 0 -54px;
        }
        .shop{
            background-position: 0 -98px;
        }
    }
    .bar-right{
        font-size: 15px;
        color: white;
        line-height: 58px;
        .cart{
            background-color: #ffe817;
            color: #333;
        }
        .buy{
            background-color: #f69;
        }
    }
    .sport-ball{
        position: absolute;
        left: 255px;
        bottom: 22px;
    }
}
</style>